<script setup lang="ts">
import { ref } from 'vue'
import {getNewMnemonic} from '~/api'

const router = useRouter()
const go = (target: string) => router.push(target)

const mnemonic = ref('')
const shuffledMnemonic = ref('')
// const recorded = ref(false)

// const requestNewMnemonic = () => new Promise<string>((res, rej) => {
//   const mnemonic = 'try scale cabin photo bullet ignore unhappy inherit obscure pilot shock sunset dentist pony pass universe clog lava primary glimpse patrol unhappy august add'
//   window.setTimeout(() => {
//     res(mnemonic)
//   }, 1500)
// })

const init = async () => {
  const data = await getNewMnemonic()
  mnemonic.value = data.mnemonic
  const wordList = mnemonic.value.split(' ')
  wordList.sort(function(){return Math.random()>0.5?-1:1;});
  shuffledMnemonic.value = wordList.join(' ')
}

onMounted(() => init())

const next = () => {
  localStorage.setItem('mnemonic', mnemonic.value)
  go('/password')
}
</script>

<template>
  <div class="page-paste">
    <div class="card">
      <div class="title">Step (1/4): Mnemonic</div>
      <!-- <div v-if="recorded">

      </div> -->
      <div v-if="mnemonic != ''">
        <div class="mb-4">Record this on paper or somewhere, this is <b>very important</b>. Lose your mnemonic means you lose your account!</div>
        <div class="card p-3">
          {{mnemonic}}
          <!-- <WordButton v-for="(item, index) in mnemonic.split(' ')" :key="index" :word="item">
          </WordButton> -->
        </div>
        <div class="btn-in-card" @click="next">I have recorded</div>
      </div>
      <div v-else>
        <div>Generating mnenomic for you...</div>
      </div>
      

      <!-- <div class="btn-in-card mt-5" @click="go('/password')">Next</div> -->
    </div>
  </div>
</template>

<style>
.page-paste {
  padding: 15px;
}

.mne-paste {
  border-radius: 7px;
  width: 100%;
  margin: 15px 0;
  height: 10rem;
  padding: 0.5rem;
}

.words-container {
  display: flex;
  flex-flow: row wrap;
}
</style>